<template>
  <div class="iconlist">
    <div class="item">
      <svg t="1649913633598" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="1970" width="16" height="16">
        <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="1971"></path>
        <path
          d="M136.533333 68.266667a34.133333 34.133333 0 0 1 34.133334-34.133334h682.666666a34.133333 34.133333 0 0 1 34.133334 34.133334v170.666666a34.133333 34.133333 0 0 1-34.133334 34.133334H170.666667a34.133333 34.133333 0 0 1-34.133334-34.133334V68.266667z"
          fill="#FFAA44" p-id="1972"></path>
        <path
          d="M102.4 170.666667a34.133333 34.133333 0 0 1 34.133333-34.133334h750.933334a34.133333 34.133333 0 0 1 34.133333 34.133334v593.3056a34.133333 34.133333 0 0 1-18.875733 30.5152l-360.209067 180.1216a68.266667 68.266667 0 0 1-61.0304 0L121.275733 794.487467A34.133333 34.133333 0 0 1 102.4 763.972267V170.666667z"
          fill="#11AA66" p-id="1973"></path>
        <path
          d="M496.605867 305.3568a17.066667 17.066667 0 0 1 30.788266 0L576.853333 408.917333a17.066667 17.066667 0 0 0 13.175467 9.557334l113.800533 15.018666a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018667a17.066667 17.066667 0 0 0-5.051733 15.496533l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090667l-100.864-54.749867a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.749867a17.066667 17.066667 0 0 1-24.917334-18.090667l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496533l-83.217066-79.018667a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018666a17.066667 17.066667 0 0 0 13.175466-9.557334l49.425067-103.560533z"
          fill="#FFFFFF" p-id="1974"></path>
      </svg>
      <span> {{ $t('discover.recomment') }} </span>
    </div>
    <div class="item">
      <svg t="1649914214599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3212" width="16" height="16">
        <path d="M965 864.6H65V218.8h900v645.8z m-830-70h760V288.8H135v505.8zM588.6 117.8h232.3v70H588.6z"
          fill="#405af6" p-id="3213"></path>
        <path
          d="M691.1 417.4H773v232.3h-81.9zM248.9 533.5c0 4.4 0.2 8.8 0.6 13.2h274.8c0.4-4.3 0.6-8.7 0.6-13.2 0-5.4-0.3-10.7-0.9-15.9H249.8c-0.6 5.3-0.9 10.6-0.9 15.9zM256.6 579.1c3.6 10.4 8.5 20.3 14.4 29.4h231.8c5.9-9.1 10.8-19 14.4-29.4H256.6zM300.2 640.9c23.7 19.2 53.9 30.7 86.8 30.7s63.1-11.5 86.8-30.7H300.2zM271.8 457.5c-5.7 8.6-10.5 17.9-14.2 27.8h258.7c-3.7-9.8-8.4-19.2-14.2-27.8H271.8zM472.4 425.1c-23.5-18.5-53.2-29.6-85.4-29.6-32.3 0-61.9 11.1-85.4 29.6h170.8z"
          fill="#405af6" p-id="3214"></path>
        <path
          d="M389.6 681.3c-81.5 0-147.8-66.3-147.8-147.8s66.3-147.8 147.8-147.8S537.4 452 537.4 533.5s-66.3 147.8-147.8 147.8z m0-265.6c-65 0-117.8 52.8-117.8 117.8s52.8 117.8 117.8 117.8 117.8-52.8 117.8-117.8-52.8-117.8-117.8-117.8z"
          fill="#405af6" p-id="3215"></path>
      </svg>
      <span> {{ $t('discover.fm') }} </span>
    </div>
    <div class="item">
      <svg t="1649914245604" class="icon" viewBox="0 0 1118 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3628" width="16" height="16">
        <path
          d="M0 0m74.640492 0l951.666272 0q74.640492 0 74.640492 74.640492l0 858.365657q0 74.640492-74.640492 74.640492l-951.666272 0q-74.640492 0-74.640492-74.640492l0-858.365657q0-74.640492 74.640492-74.640492Z"
          fill="#AFE1FA" p-id="3629"></path>
        <path
          d="M620.449089 482.830682H886.355842a74.640492 74.640492 0 0 1 74.640492 74.640492v0.839706H545.808597v-0.839706a74.640492 74.640492 0 0 1 74.640492-74.640492zM620.449089 709.084674H886.355842a74.640492 74.640492 0 0 1 74.640492 74.640492H545.808597a74.640492 74.640492 0 0 1 74.640492-74.640492zM828.042958 257.043194H886.355842a74.640492 74.640492 0 0 1 74.640492 74.640492v0.839706H753.402466v-0.839706a74.640492 74.640492 0 0 1 74.640492-74.640492zM643.774243 214.591414H326.552152v330.004275a130.620861 130.620861 0 1 0-37.320246 247.24663A132.393573 132.393573 0 0 0 401.192644 659.635348V363.872398h242.581599z"
          fill="#F5834A" p-id="3630"></path>
      </svg>
      <span> {{ $t('discover.songlist') }} </span>
    </div>
    <div class="item">
      <svg t="1649914272808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4472" width="16" height="16">
        <path
          d="M784.981333 170.769067A16.930133 16.930133 0 0 0 768.085333 153.6h-512.170666C246.613333 153.6 238.933333 161.314133 238.933333 170.837333v305.578667C247.466667 620.526933 367.035733 733.866667 512 733.866667c145.032533 0 264.516267-113.390933 272.622933-257.416534l0.3584-305.681066zM835.84 477.866667C826.948267 649.028267 685.346133 785.066667 512 785.066667c-173.3632 0-314.948267-136.0384-324.266667-307.2V170.837333C187.733333 133.12 218.2656 102.4 255.914667 102.4h512.170666a68.130133 68.130133 0 0 1 68.096 68.437333L835.84 477.866667z"
          fill="#108EE9" p-id="4473"></path>
        <path
          d="M904.311467 433.7152l0.136533-126.464A17.015467 17.015467 0 0 0 887.364267 290.133333H836.266667v238.9504a110.933333 110.933333 0 0 0 68.0448-95.368533zM785.066667 238.933333h102.2976a68.215467 68.215467 0 0 1 68.283733 68.369067l-0.136533 127.8976c-4.437333 85.572267-75.229867 153.6-161.911467 153.6-2.8672 0-5.700267-0.068267-8.533333-0.221867V238.933333zM187.648 238.933333l51.2 51.2h-51.2v-51.2z m0 51.2H136.567467A17.015467 17.015467 0 0 0 119.466667 307.2512l0.136533 126.464a110.933333 110.933333 0 0 0 68.0448 95.368533V290.133333z m51.2-51.2v349.6448a164.778667 164.778667 0 0 1-8.533333 0.221867c-86.664533 0-157.474133-68.027733-161.911467-153.6L68.266667 307.3024A68.215467 68.215467 0 0 1 136.567467 238.933333h102.280533z"
          fill="#108EE9" p-id="4474"></path>
        <path d="M494.933333 733.866667l51.2 0 0 179.2-51.2 0 0-179.2Z" fill="#108EE9" p-id="4475"></path>
        <path d="M699.733333 870.4l0 51.2-375.466666 0 0-51.2 375.466666 0Z" fill="#108EE9" p-id="4476"></path>
      </svg>
      <span> {{ $t('discover.rank') }} </span>
    </div>
  </div>
</template>

<script setup>
import { } from "vue";
</script>

<style lang="less" scoped>
.iconlist {
  width: 7.5rem;
  display: flex;
  justify-content: space-around;
  padding: 0.2rem;
  background-color: rgba(197, 170, 135, .1);

  .item {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 0.16rem;
    align-items: center;

  }

  .icon {
    width: 0.9rem;
    height: 0.9rem;
    // margin: 0 auto;

  }
}
</style>
 